<?php include("header.php"); ?>
<style type="text/css">
td {
	width: 50%;
}
</style>
<script>
$(document).ready(function() { 
	$("#step2").hide();
	$("input[name=submit]").click(function() {
		var user = $("input[name=dbUser]").val();
		var host = $("input[name=host]").val();
		var pass = $("input[name=dbPass]").val();
		var name = $("input[name=dbName]").val();
		$("#val").hide();
		$("#val").load("ajaxStep1.php", {host: host, dbPass: pass, dbName: name, dbUser: user}, function() {
			var con = $("#val").html();
			if (con == "no") {
				alert("All righty then! I have successfully connected to your database, time to start step2");
				$("#step2").load("step2.php", {DBuser: user, host: host, DBpass: pass, DBname: name}, function() {
					$(this).fadeIn("fast");
				});
			}
		});
	});
});
</script>
<div id="content" class="wrap">
<h2>Step 1</h2>
<p>
	This is where we establish connection to your mysql database. If you don't know what host is, just leave it
</p>
<table>
<tr><td>Host</td><td><input type="text" name="host" value="localhost" /></td></tr>
<tr><td>Database Name</td><td><input type="text" name="dbName"  /></td></tr>
<tr><td>Database Username</td><td><input type="text" name="dbUser" /></td></tr>
<tr><td>Database Password</td><td><input type="text" name="dbPass" /></td></tr>
<tr><td></td><td><input type="submit" value="Go!" name="submit" /></td></tr>
</table>
</div>
<div id="step2"></div>
</body>
<span id="val"></span>
</html>